<template>
    <div class="returnDialog">
      <el-form ref="form" label-position="top" :model="formReturn" label-width="160px">
        <el-form-item label="示例名称">
          <el-input size="small" v-model="exampleName" disabled></el-input>
        </el-form-item>
        <el-form-item label="HTTP Status Code">
          <el-select size="small" v-model="formReturn.successStatusCode" placeholder="请选择">
            <el-option
              v-for="item in optionsCode"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input size="small" v-model="formReturn.successStatusCode" v-if="formReturn.code === '5'" placeholder="Http Code(默认200)"></el-input>
        </el-form-item>
        <el-form-item label="Content-Type">
          <el-input size="small" v-model="formReturn.successContentType" placeholder="默认 text/html; charset=UTF-8"></el-input>
        </el-form-item>
        <el-form-item label="示例内容">
          <div style="height: 300px;">
            <codeMirror ref="successCodeSuccess" :refName="refNameExample" :value="textAreaValueExampleSuccess"></codeMirror>
          </div>
        </el-form-item>
      </el-form>
      <div style="text-align: right;margin-top: 16px;">
        <el-button type="primary" size="small" @click="saveForm">确 认</el-button>
        <el-button size='small' @click="closeDialogFun">取 消</el-button>
      </div>
    </div>
</template>

<script>
  import codeMirror from '@/components/codeMirror'
  export default {
    name: 'successReturnExample',
    components: {
      codeMirror
    },
    props: ['sendDialogData'],
    data() {
      return {
        refNameExample: 'exampleReturnSuccess',
        textAreaValueExampleSuccess: '',
        optionsCode: [
          {
            value: '200',
            label: '200'
          },
          {
            value: '302',
            label: '302'
          },
          {
            value: '404',
            label: '404'
          },
          {
            value: '500',
            label: '500'
          },
          {
            value: '502',
            label: '502'
          },
          {
            value: '其他',
            label: '其他'
          }
        ],
        exampleName: '成功示例',
        formReturn: {
          successStatusCode: '200',
          otherCode: '',
          successContentType: 'text/html; charset=UTF-8',
          successMock: ''
        }
      }
    },
    created() {
      this.formReturn.successStatusCode = this.sendDialogData.successStatusCode
      this.formReturn.successContentType = this.sendDialogData.successContentType
      this.textAreaValueExampleSuccess = this.sendDialogData.successMock
    },
    methods: {
      saveForm() {
        this.formReturn.successMock = this.$refs.successCodeSuccess.getCodeData()
        this.$emit('closeFun', this.formReturn)
      },
      closeDialogFun() {
        this.$emit('closeFun')
      }
    }
  }
</script>

<style scoped>

</style>
